<template>
  <el-container class="container">
    <el-menu
      default-active="1"
      class="nav-menu"
      background-color="#303438"
      text-color="#fff"
      active-text-color="#ffd04b"
      @select="selectNavMenu"
    >

      <el-menu-item index="1">
        <i class="el-icon-notebook-2" />
        <span slot="title">分章习题</span>
      </el-menu-item>

      <el-menu-item index="2">
        <i class="el-icon-notebook-1" />
        <span slot="title">模拟题库</span>
      </el-menu-item>

      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-collection" />
          <span>收藏本</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="3-1">
            <i class="el-icon-collection-tag" />
            <span slot="title">分章习题</span></el-menu-item>
          <el-menu-item
            index="3-2"
          ><i class="el-icon-collection-tag" />
            <span slot="title">模拟题</span></el-menu-item>
        </el-menu-item-group>
      </el-submenu>

    </el-menu>

    <router-view />
  </el-container>
</template>

<script>

export default {
  name: 'Exercises',
  methods: {
    selectNavMenu(key, keyPath) {
      console.log(key)
      switch (key) {
        case '1':
          this.$router.push(`/exercises/chapter`)
          break
        case '2':
          this.$router.push(`/exercises/simulation`)
          break
        case '3-1':
          this.$router.push(`/exercises/chapter/collect`)
          break
        case '3-2':
          this.$router.push(`/exercises/simulation/collect`)
          break
      }
    }
  }
}
</script>

<style>
.container{
  height:100%;width:100%;
position:absolute;
}
.nav-menu{
 width: auto;
  text-align: left;
  padding-right: 10px;
  min-width: 220px;
  widows: auto;
  min-height: 100%;
}
</style>
